import { memo } from 'react';
import Avatar from '../Avatar/Avatar';
import { useLocation, useNavigate } from 'react-router-dom';

const Header = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const pathname = location.pathname.split('/').pop();

  const navList = [
    {
      label: '首页',
      key: '',
      onClick: () => {
        navigate('/');
      },
    },
    {
      label: '节日',
      key: 'festival',
      onClick: () => {
        navigate('/Classify/festival');
      },
    },
    // 节气
    {
      label: '节气',
      key: 'solarTerm',
      onClick: () => {
        navigate('/Classify/solarTerm');
      },
    },
    //星座
    {
      label: '星座',
      key: 'chineseZodiac',
      onClick: () => {
        navigate('/Classify/chineseZodiac');
      },
    },
    // 生肖
    {
      label: '生肖',
      key: 'zodiac',
      onClick: () => {
        navigate('/Classify/zodiac');
      },
    },
  ];

  return (
    <div className="w-full h-[64px] p-[20px] bg-[var(--bg-color)] flex-between text-[#707070] border-b border-[#ddcccc]">
      {/* logo */}
      <div>
        <span
          className="text-[24px] font-bold cursor-pointer"
          onClick={() => navigate('/')}
        >
          中国传统节日课堂
        </span>
      </div>
      {/* 菜单 */}
      <div>
        <ul className="flex-center gap-20">
          {navList.map((item) => (
            <li
              key={item.key}
              className={`cursor-pointer relative ${
                pathname === item.key ? 'text-[#000]' : ''
              } group`}
              onClick={item.onClick}
            >
              <span>{item.label}</span>
              <div
                className={`w-0 h-[2px] bg-[#000] absolute bottom-[-3px] left-0 transition-all duration-300 ${
                  pathname === item.key ? 'w-full' : ''
                } group-hover:w-full`}
              />
            </li>
          ))}
        </ul>
      </div>
      {/* 用户信息 */}
      <div>
        <Avatar />
      </div>
    </div>
  );
};

export default memo(Header);
